import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { InputItem, List, Tools, Icon } from "weaver-mobile";
const getLabel = Tools.getLabel;
const FormItem = List.FormItem;

@observer
export default class QaVerify extends Component {
    render() {
        const { store: { qa, answers, handleAnswerChange } } = this.props;

        const formItemCommonProps = {
            label: "",
            wrap: "nowrap",
            extra: <Icon type="editor" size="xxs"/>
        };

        return (
            <div className="verify">
				{ qa.map((data,index) => {
					return (
						<List key={index}>
							<FormItem 
								key={`q${index}`}
								{...formItemCommonProps }
								content={(<InputItem value={data.q} editable={false}>{`${getLabel('522641',"问题 ")}${index + 1}`}</InputItem>)}
							/>
							<FormItem 
								key={`a${index}`}
								{...formItemCommonProps}
								required={!answers[index] ? true : false}
								content={(<InputItem placeholder={getLabel('522179','请输入') } value={answers[index]} onChange={v => handleAnswerChange(v, index)}>{getLabel('24122',"答案")}</InputItem>)}
							/>
						</List>
					)
				}) }
			</div>
        );
    }
}